<template>
	<view style="background: #f5f5f9;">
		<view class="app-height" id="orderDetId">
		    <view class="submitOrders">
		        <view class="good">
		            <image mode="widthFix" :src="orderInfo.banarImg"/>
		            <view class="good-info">
		                <view class="title">{{orderInfo.productName}}</view>
		                <view class="price-num">￥{{orderInfo.activityPrice}}<view class="span">X</view>{{orderInfo.productQuantity}}</view>
		                <view class="total">
							<view class="span">合计：</view>
							￥{{orderInfo.payAmount}}
						</view>
		            </view>
		        </view>
		        <view class="good2">
		            <view class="good-info2">
		                <view class="buy" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
		                    <view>购买数量：{{orderInfo.productQuantity}}</view>
		                </view>
		            </view>
		        </view>
		        <view class="user-info">
		            <view class="name">联系人信息</view>
		            <view class="item">
		                <image mode="widthFix" class="icon" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_user.png"/>
		                <input class="input" type="text" v-model="orderInfo.userName" placeholder="您的姓名" />
		            </view>
		            <view class="item">
		                <image mode="widthFix" class="icon" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_phone.png"/>
		                <input class="input" type="number" v-model="orderInfo.userPhone" placeholder="联系电话" />
		            </view>
		            <view class="textarea">
		                <textarea v-model="orderInfo.deliveryAddress"></textarea>
		            </view>
		        </view>
		        <view class="pay-info connaught-style">
		            <view class="name">支付方式</view>
		            <view class="pay-list">
		                <view class="pay-item">
		                    <view>
								<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/wechat_pay.png"/>微信支付
		                    </view>
		                    <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/tick.png" v-if="payIndex==1" class="tick"/>
		                </view>
		                <!--<view class="pay-item">
		                    <view><img src="https://m.nocexpo.com/statics/js/modules/h5/img/alipay.png">支付宝支付
		                    </view>
		                    <img src="https://m.nocexpo.com/statics/js/modules/h5/img/tick.png" v-if="payIndex==2" class="tick">
		                </view>-->
		            </view>
		        </view>
		        <view class="btn" v-if="orderInfo.status == 1">
		            <!--<button>修改数量</button>-->
		            <view class="button" @click="cancelOrder(orderInfo.id)">取消订单</view>
		            <view class="button" @click="repay(orderInfo.id)">支付</view>
		        </view>
		        <view class="btn" v-if="orderInfo.status == 2">
		            <!--<button>修改数量</button>-->
		            <view class="button" style="background-color: #029e9d;color: white" @click="goBack">返回</view>
		            <view class="button" @click="sendMsg(orderInfo.userId,orderInfo.productId)">联系客服</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/myOrder.js'
	import commonApi from '@/utils/commonMethod.js';
	
	export default {
		data() {
			return {
				id:'',
				orderInfo:[],
				payIndex:1,
				
				currentUser:{},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
	   async onLoad(options) {
			this.id = options.id;
			this.queryOrderInfo()
			
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
			
			const currentUser = await commonApi.currentUserAxios();
			this.currentUser = currentUser.data.session_user_h5;
		},
		onShow(){
		  
		  setTimeout(()=> {
		    
		    if (getApp().globalData.onShow) {
		      getApp().globalData.onShow = 0;
		      console.log("demo前后台切换之切到前台")
		    }
		    else {
		      console.log("demo页面被切换显示")
		      this.startTime = +new Date();
		    }
		    
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		onUnload(){
		    setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		mounted(){
	
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"订单描述")
			        
			},
			queryOrderInfo() {
				orderApi.queryOrderInfo(this.id).then(res => {
					if(res.data.orderInfo.banarImg){
						res.data.orderInfo.banarImg = res.data.orderInfo.banarImg.split(",")[0]
					}
					this.orderInfo = res.data.orderInfo;
				})
			},
			cancelOrder(id){
				uni.showModal({
					title: "",
					content: "确定取消订单",
					showCancel:true,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							orderApi.cancelOrder(id).then(res => {
								uni.showModal({
									title: "",
									content: "订单已取消",
									showCancel:false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
											uni.navigateTo({
												url: '/pages/person/myOrder'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
											
										}
									}
								});
							})
						}
					}.bind(this)
				});
			},
			//在线沟通
			sendMsg(userId,productId) {
				uni.navigateTo({
					url: '/pages/news/chatDetail?toUserId=' + userId + '&productId=' + productId
				})
			},
			goBack(){
				uni.navigateTo({
					url: '/pages/person/myOrder?status=' + 2
				})
			},
		}
	}
	
</script>

<style>
	.submitOrders .good {
	    background-color: #ffffff;
	    flex-wrap: nowrap;
	    padding: 28rpx;
	    align-items: flex-start;
		display: flex;
	}
	.submitOrders .good image {
	    width: 140rpx;
	    height: 140rpx;
	    border-radius: 5rpx;
	    flex-shrink: 0;
	}
	.submitOrders .good .good-info {
	    margin-left: 18rpx;
	    width: 100%;
	    flex-shrink: 1;
	}
	.submitOrders .good .good-info .title {
	    font-size: 13px;
	    line-height: 50rpx;
	    color: #4d4d4d;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	.submitOrders .good .good-info .price-num {
	    font-size: 14px;
		display: flex;
	}
	.submitOrders .good .good-info .price-num .span {
	    font-size: 12px;
	    margin-left: 14rpx;
	}
	.submitOrders .good .good-info .total {
	    text-align: right;
	    font-size: 20px;
	    color: #fc5260;
		float: right;
		display: flex;
		align-items: center;
	}
	.submitOrders .good .good-info .total .span {
	    color: #333333;
	    font-size: 13px;
	    margin-right: 0;
	}
	.good2 {
	    background-color: #ffffff;
	    flex-wrap: nowrap;
	    padding: 7rpx  28rpx;
	    align-items: flex-start;
	}
	.good-info2 {
	    margin-left: 18rpx;
	    width: 100%;
	    flex-shrink: 1;
	}
	.submitOrders .user-info {
	    margin-top: 26rpx;
	    background-color: #ffffff;
	    padding: 28rpx;
	    padding-right: 0;
	}
	.submitOrders .user-info .name {
	    margin-bottom: 35rpx;
	}
	.submitOrders .user-info .item {
	    justify-content: flex-start;
	    flex-wrap: nowrap;
	    height: 84rpx;
	    border-bottom:  1rpx solid #ebebeb;
	    position: relative;
		display: flex;
		align-items: center;
	}
	.submitOrders .user-info .item .input {
	    width: 90%;
	    flex-shrink: 1;
	    padding-left: 21rpx;
	    outline: none;
	    border: 0;
	    height: 90%;
	    color: #8f9aa8;
	    font-size: 14px;
	}
	.submitOrders .user-info .item image.icon {
	    width: 28rpx;
	    flex-shrink: 0;
	}
	.submitOrders .user-info .textarea textarea {
	    min-width: 100%;
	    padding-top: 21rpx;
	    height: 93rpx;
	    border: 0;
	    resize: none;
	    color: #8f9aa8;
	}
	.submitOrders .pay-info {
	    margin-top: 24rpx;
	    background-color: #ffffff;
	}
	.submitOrders .pay-info .name {
	    padding: 28rpx;
	    margin-bottom:  -14rpx;
	}
	.connaught-style .pay-list {
	    padding: 0px 28rpx;
	}
	.connaught-style .pay-list .pay-item:first-child {
	    border-bottom: 1rpx solid #ededed;
	}
	
	.connaught-style .pay-list .pay-item {
	    padding: 0px  7rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.connaught-style .pay-list .pay-item > view {
	    line-height:  91rpx;
	}	
	.connaught-style .pay-list .pay-item > view > image {
	    width: 35rpx;
	    margin-right: 21rpx;
	}
	.connaught-style .pay-list .pay-item .tick {
	    width: 35rpx;
	}
	.submitOrders .btn {
	    padding: 70rpx 28rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.submitOrders .btn .button {
	    width: 47.5%;
	    line-height: 84rpx;
	    border-radius:  9rpx;
	    font-size: 16px;
	    border: 0px;
	    background-color: #ffffff;
		text-align: center;
	}

	.submitOrders .btn .button:last-child {
	    color: #ffffff;
	    background-color: #029e9d;
	}
</style>